/**
 * 动画卡片组件
 * 提供多种入场动画效果
 */

import { Card } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { ReactNode, ComponentProps } from "react"

interface AnimatedCardProps extends ComponentProps<typeof Card> {
  children: ReactNode
  delay?: number
  animation?: 'fade' | 'slide-up' | 'slide-down' | 'scale' | 'none'
  hover?: boolean
}

export function AnimatedCard({
  children,
  delay = 0,
  animation = 'slide-up',
  hover = true,
  className,
  ...props
}: AnimatedCardProps) {
  const animationClasses = {
    'fade': 'animate-in fade-in',
    'slide-up': 'animate-in fade-in slide-in-from-bottom-4',
    'slide-down': 'animate-in fade-in slide-in-from-top-4',
    'scale': 'animate-in fade-in zoom-in-95',
    'none': '',
  }

  const hoverClasses = hover 
    ? 'transition-all duration-300 hover:shadow-lg hover:-translate-y-1' 
    : ''

  return (
    <Card
      className={cn(
        animationClasses[animation],
        hoverClasses,
        className
      )}
      style={{
        animationDelay: `${delay}ms`,
        animationDuration: '500ms',
        animationFillMode: 'both',
      }}
      {...props}
    >
      {children}
    </Card>
  )
}

